<template>
    <div class="home-reservation">
        <Swiper v-bind="swiperOption" :modules="[Autoplay, EffectCreative]">
            <SwiperSlide v-for="(item, index) in slideList" :key="index">
                <img :src="'img/home/' + item.img + '.jpeg'" class="swapper-content" />
            </SwiperSlide>
            <SwiperControls />
        </Swiper>
    </div>
</template>
<script setup lang="ts">
    import { EffectCreative, Autoplay } from 'swiper/modules'
    import { ref } from 'vue'
    const swiperOption = ref({
        loop: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: true
        },
        grabCursor: true, // 鼠标手型抓取滑动
        slidesPerView: 4, // 同时显示的数量
        freeMode: true
    })
    const slideList = ref([
        { img: '1', text: '', url: '' },
        { img: '2', text: '', url: '' },
        { img: '3', text: '', url: '' },
        { img: '1', text: '', url: '' },
        { img: '2', text: '', url: '' },
        { img: '3', text: '', url: '' },
        { img: '1', text: '', url: '' },
        { img: '2', text: '', url: '' },
        { img: '3', text: '', url: '' }
    ])
</script>

<style scoped>
    .home-reservation {
        position: relative;
    }
</style>
